<!DOCTYPE html>
<html
  lang="zh"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
  <head>
    <th:block th:include="include :: header('实时数据监测')" />
    <script
      src="/js/echarts.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script
      src="/js/jquery-2.0.0.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script
      src="/js/bootstrap.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script
      src="/js/bootstrap-paginator.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <style type="text/css">
      .echarts {
      }

      .leftinfo {
        background: url("/img/fan.gif") no-repeat;
        width: 100%;
        height: 227px;
        background-size: 100% 100%;
        background-position: center center;
      }

      .fname {
        font-weight: bold;
        font-size: 12px;
      }

      .fvalue {
        font-size: 10px;
        color: blue;
      }

      .funit {
        font-size: 8px;
        font-style: oblique;
        color: #f07f39;
      }

      tbody > tr:hover {
        background-color: wheat !important;
      }

      .ibox {
        margin: 0 0 27px;
      }
    </style>
  </head>
  <body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
      <div class="row">
        <div class="col-sm-2">
          <div class="row">
            <div class="pull-left leftinfo">大型风力发电机</div>
          </div>
          <div class="row">
            <div class="ibox float-e-margins">
              <div class="ibox-title">
                <h5>配置信息</h5>
                <div class="ibox-tools">
                  <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                  </a>
                  <a
                    class="dropdown-toggle"
                    data-toggle="dropdown"
                    href="graph_flot.html#"
                  >
                    <i class="fa fa-wrench"></i>
                  </a>
                  <ul class="dropdown-menu dropdown-user">
                    <li><a href="graph_flot.html#">选项1</a></li>
                    <li><a href="graph_flot.html#">选项2</a></li>
                  </ul>
                  <a class="close-link">
                    <i class="fa fa-times"></i>
                  </a>
                </div>
              </div>

              <div>
                <table class="table">
                  <tbody>
                    <tr>
                      <td class="fname">编号</td>
                      <td class="fvalue" th:text="${bizFan.fanCode}">003</td>
                      <td class="funit"></td>
                    </tr>
                    <tr>
                      <td class="fname">品牌</td>
                      <td class="fvalue" th:text="${bizFan.brand}">飓风</td>
                      <td class="funit"></td>
                    </tr>
                    <tr>
                      <td class="fname">功率</td>
                      <td class="fvalue" th:text="${bizFan.power}">80</td>
                      <td class="funit">kw/h</td>
                    </tr>
                    <tr>
                      <td class="fname">实际功率</td>
                      <td class="fvalue" th:text="${bizFan.realPower}">75</td>
                      <td class="funit">kw/h</td>
                    </tr>
                    <tr>
                      <td class="fname">坐标</td>
                      <td class="fvalue" th:text="${bizFan.coordinates}">
                        (1.2.2.1)
                      </td>
                      <td class="funit"></td>
                    </tr>
                    <tr>
                      <td class="fname">安装时间</td>
                      <td class="fvalue" th:text="${bizFan.installTime}">
                        2019.12.16
                      </td>
                      <td class="funit"></td>
                    </tr>
                    <tr>
                      <td class="fname">状态</td>
                      <td class="fvalue" id="status-text">正常</td>
                      <td class="funit"></td>
                    </tr>
                  </tbody>
                </table>
                <center>
                  <a
                    class="btn btn-info btn-rounded btn-sm"
                    onclick="javascript :history.back(-1);"
                    ><i class="fa fa-angle-double-left"></i>&nbsp;返回上一页</a
                  >
                </center>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-10">
          <div class="layui-collapse" lay-accordion="">
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">加速度</h2>
              <div class="layui-colla-content layui-show">
                <table id="layui-table1" lay-filter="tableFilter"></table>
              </div>
            </div>
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">倾角</h2>
              <div class="layui-colla-content">
                <table id="layui-table2" lay-filter="tableFilter"></table>
              </div>
            </div>
            <div class="layui-colla-item">
              <h2 class="layui-colla-title">位移</h2>
              <div class="layui-colla-content">
                <table id="layui-table3" lay-filter="tableFilter"></table>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
      var prefix = ctx + "sensor/";
      // js获取风机状态:
      var fanStatus = [[${bizFan.status}]];
      // 状态0关闭1开启2异常
      if (fanStatus == 0) {
          // 0关闭
          $(".leftinfo").css("background", "url('/img/fan_stop.png')no-repeat");
          $(".leftinfo").css("width", "100%");
          $(".leftinfo").css("height", "227px");
          $(".leftinfo").css("background-size", "100%100%");
          $(".leftinfo").css("background-position", "center center");
          $("#status-text").text("关闭");
      } else if (fanStatus == 2) {
          // 2异常
          $(".leftinfo").css("background", "url('/img/fan_fail.png')no-repeat");
          $(".leftinfo").css("width", "100%");
          $(".leftinfo").css("height", "227px");
          $(".leftinfo").css("background-size", "100%100%");
          $(".leftinfo").css("background-position", "center center");
          $("#status-text").text("异常");
      }

      // 表格初始化
      function initTable(url, cols, domId, type) {
        layui.use("table", function () {
          var table = layui.table;

          table.render({
            elem: domId,
            url: prefix + url,
            method: "GET",
            where: {
              fanId: [[${bizFan.id}]]
            },
            page: false,
            cols: [cols],
            parseData: function (res) {
              let result = {
                code: 0,
                msg: res.message,
                count: 0,
                data: [],
              }
              if (type == 1) { // 加速度
                result['data'] = res.data.data.ACC
              }
              if (type == 2) { // 倾角
                result['data'] = res.data.data.DIP
              }
              if (type == 3) { // 位移
                result['data'] = []
              }
              return result;
            },
            done: function (res, curr, count) {
              if (res.code !== 0) {
                layer.msg(res.msg || "数据加载失败");
              }
            },
          });
        });
      }

      // 获取加速度数据
      function getJsdData() {
        let cols = [
          { field: "pointName", title: "测点名称", width: 150, sort: true },
          { field: "createTime", title: "监测时间", width: 150, sort: true },
          { field: "value1",  title: "X方向平均值",  width: 150, sort: true },
          { field: "value2",  title: "X方向最小值",  width: 150, sort: true },
          { field: "value3",  title: "X方向最大值",  width: 150, sort: true },
          { field: "value4",  title: "X方向平均值",  width: 150, sort: true },
          { field: "value5",  title: "X方向主振频率", width: 150, sort: true },
          { field: "value6",  title: "X方向次振频率", width: 150, sort: true },
          { field: "value7",  title: "X方向季振频率", width: 150, sort: true },
          { field: "value8",  title: "X方向主振功率", width: 150, sort: true },
          { field: "value9",  title: "X方向次振功率", width: 150, sort: true },
          { field: "value10", title: "X方向季振功率", width: 150, sort: true },
          { field: "value11", title: "Y方向平均值",  width: 150, sort: true },
          { field: "value12", title: "Y方向最小值",  width: 150, sort: true },
          { field: "value13", title: "Y方向最大值",  width: 150, sort: true },
          { field: "value14", title: "Y方向有效值",  width: 150, sort: true },
          { field: "value15", title: "Y方向主振频率", width: 150, sort: true },
          { field: "value16", title: "Y方向次振频率", width: 150, sort: true },
          { field: "value17", title: "Y方向季振频率", width: 150, sort: true },
          { field: "value18", title: "Y方向主振功率", width: 150, sort: true },
          { field: "value19", title: "Y方向次振功率", width: 150, sort: true },
          { field: "value20", title: "Y方向季振功率", width: 150, sort: true },
          { field: "value21", title: "Z方向平均值",  width: 150, sort: true },
          { field: "value22", title: "Z方向最小值",  width: 150, sort: true },
          { field: "value23", title: "Z方向最大值",  width: 150, sort: true },
          { field: "value24", title: "Z方向有效值",  width: 150, sort: true },
          { field: "value25", title: "Z方向主振频率", width: 150, sort: true },
          { field: "value26", title: "Z方向次振频率", width: 150, sort: true },
          { field: "value27", title: "Z方向季振频率", width: 150, sort: true },
          { field: "value28", title: "Z方向主振功率", width: 150, sort: true },
          { field: "value29", title: "Z方向次振功率", width: 150, sort: true },
          { field: "value30", title: "Z方向季振功率", width: 150, sort: true },
        ];
        // 初始化表格
        initTable("commom/getFanGeneralData", cols, "#layui-table1", 1);
      }

      // 获取倾角数据
      function getQjData() {
        let cols = [
          { field: "pointName", title: "测点名称", width: 150, sort: true },
          { field: "createTime", title: "监测时间", width: 150, sort: true },
          { field: "value1",  title: "X方向平均值", width: 150, sort: true },
          { field: "value2",  title: "X方向最小值", width: 150, sort: true },
          { field: "value3",  title: "X方向最大值", width: 150, sort: true },
          { field: "value4",  title: "X方向有效值", width: 150, sort: true },
          { field: "value5",  title: "Y方向平均值", width: 150, sort: true },
          { field: "value6",  title: "Y方向最小值", width: 150, sort: true },
          { field: "value7",  title: "Y方向最大值", width: 150, sort: true },
          { field: "value8",  title: "Y方向有效值", width: 150, sort: true },
          { field: "value9",  title: "Z方向平均值", width: 150, sort: true },
          { field: "value10", title: "Z方向最小值", width: 150, sort: true },
          { field: "value11", title: "Z方向最大值", width: 150, sort: true },
          { field: "value12", title: "Z方向有效值", width: 150, sort: true },
        ];
        // 初始化表格
        initTable("commom/getFanGeneralData", cols, "#layui-table2", 2);
      }

      // 获取位移数据
      function getWyData() {

      }

      getJsdData()
      getQjData()

    </script>
  </body>
</html>
